<template>
  <div class="reimbursement-container" v-if="!pageLoading">
    <qm-workflow ref="qmWorkflow" keyProp="reimbursementId" :rules="rules" :categories="['附件资料']">
      <template v-slot:form="{ model, pageAction }">
        <BaseInfo :model="model" :controlData="controlData"></BaseInfo>
        <ReimbursementInfo
          :baseInfoModel="model"
          :reimbursementDetails="reimbursementDetails"
          :controlData="controlData"
          :pageAction="pageAction"
          @onChange="onChangeReimbursementCallBack"
        ></ReimbursementInfo>
        <InvoiceInfo
          :invoices="invoices"
          :controlData="controlData"
          @onChange="onChangeInvoiceCallBack"
        ></InvoiceInfo>
      </template>
    </qm-workflow>
  </div>
</template>

<script>
import WorkflowController from "@/libs/framework/workflowController";
import BaseInfo from "./baseInfo";
import ReimbursementInfo from "./reimbursementInfo";
import InvoiceInfo from "./invoiceInfo";

export default class Instance extends WorkflowController {
  onBeforeInit() {
    this.urls = {
      model: "/eip/workflow/reimbursement/getWorkflowViewModel",
    };
  }

  // onBeforeSave(postModel) {
  //   const { reimbursementDetails } = postModel;
  //   // 校验报销清单数据
  //   if (
  //     !(Array.isArray(reimbursementDetails) && reimbursementDetails.length > 0)
  //   ) {
  //     this.vm.msgInfo("报销清单至少含一条数据...");
  //     return false;
  //   }
  // }

  autoLoadDone() {
    return false;
  }

  mixin() {
    return {
      components: {
        BaseInfo,
        ReimbursementInfo,
        InvoiceInfo,
      },
      data() {
        return {
          rules: {
            model: {
              departmentId: [
                {
                  required: true,
                  message: "报销部门不能为空",
                  trigger: "change",
                },
              ],
              applicationDate: [
                {
                  required: true,
                  message: "申请日期不能为空",
                  trigger: "change",
                },
              ],
              originalLoan: [
                {
                  required: true,
                  message: "原借款不能为空",
                  trigger: "blur",
                },
              ],
              refund: [
                {
                  required: true,
                  message: "退/补不能为空",
                  trigger: "blur",
                },
              ],
              applicantUserId: [
                {
                  required: true,
                  message: "报销人不能为空",
                  trigger: "change",
                },
              ],
              payeeUserId: [
                {
                  required: true,
                  message: "领款人不能为空",
                  trigger: "change",
                },
              ],
              month: [
                {
                  required: true,
                  message: "报销月份不能为空",
                  trigger: "change",
                },
              ],
            },
          },
        };
      },
      computed: {
        reimbursementDetails() {
          return this.models.reimbursementDetails;
        },
        invoices() {
          return this.models.invoices;
        },
      },
      methods: {
        onChangeReimbursementCallBack(reimbursementDetails) {
          this.models.reimbursementDetails = reimbursementDetails;
        },
        onChangeInvoiceCallBack(invoices) {
          this.models.invoices = invoices;
        },
      },
    };
  }
}
</script>

<style lang="scss">
.reimbursement-container {
  .el-card {
    margin-bottom: 10px;
    .el-card__header {
      background: #f2f2f2;
      .header-content {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        span {
          flex: 1;
        }
      }
    }
  }
  .amount-content {
    display: flex;
    flex-flow: row nowrap;
    white-space: nowrap;
  }
  .el-input-number {
    width: 100%;
    .el-input--small .el-input__inner {
      text-align: left !important;
    }
  }
  .el-form-item__error {
    line-height: 0.4;
  }
  .vxe-toolbar {
    .vxe-buttons--wrapper {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      div {
        flex: 1;
      }
    }
  }
}
</style>
